<template>
<div class="main">
  <el-tabs type="border-card">
  <el-tab-pane>
    <span slot="label" class="labelcolor">账户余额</span> 
    <el-row>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" text-color=""
             active-text-color="#00aff0" style="margin-bottom:10px">
            <el-menu-item index="1" class="labelcolor" @click='changeMain("CountbyMonth")'><div class="groupC">月结账户</div></el-menu-item>
            <el-menu-item index="2" class="labelcolor" @click='changeMain("ForeCount")'><div class="groupC">预付款账户</div></el-menu-item>
        </el-menu>
    </el-row>
    <el-row>
        <component :is="currentComponent"></component>
    </el-row>
  </el-tab-pane>
  </el-tabs>
</div>
</template>
<script>
export default {
    data(){
      return{
        activeIndex:'1',
        currentComponent:'CountbyMonth'
      }  
    },
    components: {
        CountbyMonth(resolve) {require(["./CountbyMonth.vue"], resolve); },
        ForeCount(resolve) {require(["./ForeCount.vue"], resolve); }
        // ，组件名(resolve) {require(["./组件名.vue"], resolve); }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      changeMain:function(obj){
            this.currentComponent = obj;
        }
    }
}
</script>
<style src="../style/mine.css">

</style>